<template>
  <!--登录-->
  <div class="wrap">
    <div class="tdbModule loginPage">
      <div class="registerTitle">用户登录</div>
      <div class="registerCont">
        <ul>
          <li>
            <span class="dis"></span>
            <input v-model="userInfo.userType" type="radio" value="1"/>
            投资人
            <input v-model="userInfo.userType" type="radio" value="2"/>
            借款人
          </li>
          <li>
            <span class="dis">手机号：</span>
            <input class="input" v-model="userInfo.mobile"/>
          </li>

          <li>
            <span class="dis">密码：</span>
            <input class="input" v-model="userInfo.password" type="password"/>
          </li>
          <li class="btn">
            <button @click="login()" :class="{ disabled: !isValid }">
              立即登录
            </button>
          </li>
        </ul>
        <!-- 更多登录方式 -->
        <div class="more-sign">
          <h6>社交帐号登录</h6>
          <ul>
            <li>
              <a
                  id="weixin"
                  class="weixin"
                  :href="wxLogin"
              ><i class="iconfont icon-weixin"
              /></a>
            </li>
            <li>
              <a id="qq" class="qq" target="_blank" href="#"
              ><i class="iconfont icon-qq"
              /></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "~/assets/css/register.css";
import cookie from "js-cookie";

export default {
  data() {
    return {
      userInfo: {
        userType: 1,
      },
      isValid: true, //表单校验是否成功
      wxLogin: 'http://localhost:8160/finance-loan/core/api/wx/login'
    };
  },

  methods: {
    //登录
    login() {
      this.$axios.$post('/core/api/userInfo/login', this.userInfo)
          .then((response) => {
            // 缓存token分享给其他页面使用: cookie/localStorage
            // cookie: 缓存数据可以设置过期时间和作用域、请求访问后端时 会自动携带满足要求的cookie访问
            // localStorage: 缓存的数据不能设置过期时间 需要手动删除、访问后端接口时 需要手动配置才会携带参数
            cookie.set('token', response)
            localStorage.setItem('FINANCE-TOKEN', response.data)
            this.$message.success("登录成功");
            // window.location 整个页面刷新 AppHeader的vue生命周期方法会重新执行
            window.location.href = '/user'
            // this.$router.push("/"); //首页使用token 访问后端服务器可以查询到id对应用户的个人信息
          })
    },
  },
};
</script>
<style>
.more-sign {
  margin-top: 20px;
  margin-left: 200px;
}

.more-sign h6 {
  position: relative;
  margin: 0 0 10px;
  font-size: 14px;
  color: #b5b5b5;
}

/*.more-sign h6:after,*/
/*.more-sign h6:before {*/
/*  content: "";*/
/*  border-top: 1px solid #b5b5b5;*/
/*  display: block;*/
/*  position: absolute;*/
/*  width: 60px;*/
/*  top: 5px;*/
/*}*/

/*.more-sign h6:before {*/
/*  left: 30px;*/
/*}*/

/*.more-sign h6:after {*/
/*  right: 30px;*/
/*}*/

.more-sign ul {
  margin-bottom: 10px;
  list-style: none;
  padding-left: 0;
}

.more-sign ul li {
  margin: 0 5px;
  display: inline-block;
}

.more-sign ul a {
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: block;
}

.more-sign .icon-weixin {
  color: #00bb29;
}

.more-sign .icon-qq {
  color: #498ad5;
}

.more-sign ul i {
  font-size: 28px;
}

.ic-wechat:before {
  content: "\E604";
}

.ic-qq_connect:before {
  content: "\E603";
}
</style>
